<template>
	<view class="all-main">
		<u-loading-page :loading="loadding" loading-mode="semicircle" loading-text="欢迎进入风动社区"></u-loading-page>
		<view v-if="!loadding" class="main">
			<view class="title">
				<view class="lefts">
					<view class="tit">
						通讯费
					</view>
					<u-line dashed></u-line>
					<view class="msg">
						{{msg}}
					</view>
				</view>
				<view class="rights">
					<text>{{price}}</text>
				</view>
			</view>
			<view class="cash_card">
				<text>银行卡信息</text>
				<u-line dashed></u-line>
				<view class="card">
					<view class="">
						<img :src="data.bank_logo" alt="">
						<h5>{{data.bank_name}}({{bank_card_number}})</h5>
					</view>
					<view class="" @click="replace_card">
						<text>更换</text>
					</view>
				</view>
			</view>
			<view class="btn" @click="btnSave">
				返 还
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loadding: true,
				userinfo: {},
				price: '',
				display: false,
				data: {},
				bank_card_number: '',
				is_true: true,
				sn: '',
				msg: '',
				bank_id: ''
			}
		},
		onLoad(e) {
			this.sn = e.sn
			this.userinfo = uni.getStorageSync('userinfo');
			this.loadData()
			this.getBank()
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userinfo');
			this.getBank()
		},
		onBackPress(options) {
			uni.navigateTo({
				url: '/pages/version5/index/communication/index'
			})
			return true
		},
		methods: {
			// 加载数据
			async loadData() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp5({
					url: 'v1/getSnInfo',
					data: {
						sn: this.sn
					},
					header: {
						'token': this.userinfo.token
					}
				});
				uni.hideLoading()
				this.loadding = false
				if (res.code == 1) {
					this.price = res.data.flow
					this.msg = res.data.remark
				}
			},
			// 获取银行卡
			async getBank() {
				const {
					data: res
				} = await this.$myHttp5({
					url: 'Bankcard/getBankCardDetail',
					header: {
						'token': this.userinfo.token
					},
				});
				if (res.data != null) {
					this.display = true
					this.bank_id = res.data.id
					this.data = res.data
					this.bank_card_number = this.data.bank_card_number.slice(-4)
				} else {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '未绑定银行卡，是否绑定银行卡',
						success: function(res) {
							if (res.confirm) {
								_this.bank_card()
							} else if (res.cancel) {
								uni.navigateBack({});
							}
						}
					});
				}
			},
			// 绑定银行卡
			bank_card() {
				uni.navigateTo({
					url: '/pages/version5/index/realname/realname'
				})
			},
			// 更换银行卡
			replace_card() {
				uni.navigateTo({
					url: '/pages/version5/index/bank_card/bank_card'
				})
			},
			// 返还
			btnSave() {
				var that = this
				uni.showModal({
					title: '提示',
					content: '确定要返还吗？',
					success: function(res) {
						if (res.confirm) {
							that.btnSaveFun()
						}
					}
				});
			},
			// 返还 - 方法
			async btnSaveFun() {
				var that = this
				if (this.is_true) {
					this.is_true = false
					uni.showLoading({
						title: '加载中'
					});
					const {
						data: res
					} = await this.$myHttp5({
						url: 'v1/saveOrder',
						data: {
							sn: this.sn,
							province: '',
							city: '',
							district: '',
							address: '',
							gift_id: '',
							bank_id: this.bank_id,
							flow: this.price,
							type: 1
						},
						header: {
							'token': this.userinfo.token
						}
					});
					this.is_true = true
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						icon: "none"
					});
					if (res.code == 1) {
						setTimeout(function() {
							uni.switchTab({
								url: '/pages/index/index'
							})
						},1500)
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #f3f4f6;
	}
	
	.all-main {
		.main {
			
			.title {
				margin: 20rpx;
				padding: 20rpx;
				background-color: #ffffff;
				display: flex;
				justify-content: space-between;
				
				.lefts {
					width: 90%;
					.tit {
						padding-bottom: 10rpx;
						font-size: 34rpx;
						font-weight: bold;
					}
					
					.msg {
						padding-top: 10rpx;
						font-size: 24rpx;
						color: #c8c9cc;
					}
				}
				
				.rights {
					width: 10%;
					display: flex;
					align-items: center;
					justify-content: flex-end;
					text {
						font-size: 36rpx;
						font-weight: bold;
						color: #fa3534;
					}
				}
			}
			
			.cash_card {
				margin: 20rpx;
				background-color: #ffffff;
				padding: 20rpx;
				display: flex;
				flex-direction: column;
			
				.card {
					display: flex;
					justify-content: space-between;
					margin-top: 30rpx;
			
					img {
						width: 200rpx;
						height: 53rpx;
						margin-right: 30rpx;
						float: left;
					}
			
					text {
						font-size: 12px;
						line-height: 26px;
						color: #2979ff;
					}
				}
			
				text {
					font-size: 28rpx;
					color: #333;
					padding-bottom: 10rpx;
				}
			
				h5 {
					float: left;
					font-size: 38rpx;
				}
			}
			
			.btn {
				border-radius: 16rpx;
				margin: 20rpx;
				padding: 30rpx;
				background-color: #2979ff;
				color: #ffffff;
				font-weight: bold;
				text-align: center;
			}
		}
	}
</style>
